<ion-tabs *ngIf="!isDesktop">

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

<div *ngIf="isDesktop" class="desktop">
  
  <ion-header mode="md">
    <ion-toolbar>
      <ion-row class="ion-align-items-center">
        <ion-col size="2">
          <img src="./assets/icon/favicon.png" class="logo ion-text-left">
        </ion-col>
        <ion-col size="10">
          <div class="navbar" class="ion-text-center">
            <ion-button fill="clear" routerLink="/tabs/tab1" routerDirection="root" routerLinkActive="active-link"
              class="link">
              Tab 1
            </ion-button>
            <ion-button fill="clear" routerLink="/tabs/tab2" routerDirection="root" routerLinkActive="active-link"
              class="link">
              Tab 2
            </ion-button>
            <ion-button fill="clear" routerLink="/tabs/tab3" routerDirection="root" routerLinkActive="active-link"
              class="link">
              Tab 3
            </ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-toolbar>
  </ion-header>

  <ion-router-outlet class="desktop-wrapper"></ion-router-outlet>
 
  <div class="footer">
    <span>Ionic Academy 2020</span>
  </div>

</div>